﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="usercontrol/ucHeader.ascx" TagName="ucHeader" TagPrefix="uc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Css/Default.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="Admin/Js/modelpopup_v2.js"></script>
    <link href="Admin/css/modelpopup_v2.css" rel="stylesheet" />
    <script type="text/javascript" src="http://www.vietbando.com/maps/API/VBDMapAPI.js?key=e7vjH+pgQHuSyV75dwG6huYHODvqRkno"></script>

</head>
<body onload="BodyLoad()">
    <form id="form1" runat="server">
        <uc1:ucHeader ID="ucHeader1" runat="server" />
        <div id="contener">
            <div id="LeftContent" style="height: 292px;">
                <div id="leftMenu">
                    <div id="sbwfullscreen" class="SearchBoxWrap" style="">
                        <div class="SearchBoxBor">
                            <div class="SearchBox">
                                <input type="text" class="SearchText inputText keyboardInput" id="txtSearch" placeholder="Nhập vào địa chỉ, doanh nghiệp hoặc số điện thoại...">
                                <input title="Tìm" class="SearchBtn" type="button" value="" onclick="return doSearch();">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="leftResult">
                    <div id="layerResult">
                        <div id="divCategoryTree" class="dataLayerGroup">
                            <ul style="user-select: none; -moz-user-select: none; -webkit-user-select: none; padding: 0px">
                                <li>
                                    <div style="cursor: pointer; padding-bottom: 3px;">
                                        <img id="cateTreeArrow-60" src="http://bando.hochiminhcity.gov.vn/info/images/arrow_2.png" style="position: relative; top: 6px; padding: 3px;">
                                        <span style="font-weight: bold; font-size: 14px; font-family: Tahoma;">Danh sách ngân hàng</span>
                                    </div>
                                    <div id="cateTreeNode-60" style="display: block;">
                                        <ul>
                                            <asp:Repeater ID="rpAtmType" runat="server">
                                                <ItemTemplate>
                                                    <li id="cateTreeLeaf-61" style="padding: 3px;">
                                                        <input type="checkbox" onclick="CheckAtmType(this,<%# Eval("AtmTypeID") %>)" checked="checked" style="padding-right: 3px;" />
                                                        <img style="width: 16px; height: 24px; padding: 0px 3px;" src="<%# Eval("Icon") %>" />
                                                        <span style="cursor: pointer;"><%# Eval("AtmTypeName") %></span></li>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="support">
                        <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" name="saapsubanim"
					WIDTH="280" hspace="2" vspace="2" ALIGN="" id="saapsubanim">
						<PARAM NAME=movie VALUE="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQgYXozwEQrAIY-gEyCDlhJn2KCp7i">
						<PARAM NAME=menu VALUE=false>
						<PARAM NAME=quality VALUE=high>
						<PARAM NAME=bgcolor VALUE=#DDDDDD>
						<param name="SCALE" value="exactfit">
						<param name="wmode" value="transparent">
						<EMBED src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQgYXozwEQrAIY-gEyCDlhJn2KCp7i"  WIDTH="280" hspace="0" vspace="0" ALIGN="" menu=false quality=high bgcolor=#DDDDDD NAME="widget_ads_300x250"
						TYPE="application/x-shockwave-flash" flashvars="clickTAG=#" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" scale="exactfit" wmode="transparent"></EMBED>
					</OBJECT>

                    </div>
                </div>
            </div>

            <div class="bar-wrap" >

                <div class="tree-wrap">
                    <div class="Timo">
                        <a onclick="RenderVietNamMap()"><b lang="iview">Việt Nam</b></a>
                    </div>
                    <div id="TreeFilter">
                        <div id="map_path_div" style="display: inline; white-space: normal;">
                            <a id="area_0" onclick="TreeMenuClick()">Thành phố Hồ Chí Minh</a>

                        </div>
                    </div>
                    <div id="TreeChild">
                    </div>
                </div>
                <div class="RegionList_wrap" style="display: none; left: 80px;">
                    <div id="RegionList">
                        <div class="vnFilter" onclick="TreeMenuSelect('Tất cả',-1)">
                            <a href="javascript:void(0)">Tất cả</a>
                        </div>
                        <asp:Repeater ID="rpProvince" runat="server">
                            <ItemTemplate>
                                <div class="vnFilter" onclick="TreeMenuSelect('<%# Eval("Name") %>',<%# Eval("ProvinceID") %>)">
                                    <a href="javascript:void(0)"><%# Eval("Name") %></a>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </div>
        <div id="container">
        </div>
        <div id="DetailAtm" style="display: none">
            <div id="StoreInfo">
                <span style="color: #1155CC;" class="vbdID" id="lbTitle"></span>
                <span class="address" id="lbAddress"></span>
                <span class="phone" id="lbPhone"></span>
                <span class="weblink"></span>
                <span class="info" id="lbDes"></span>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $("#txtSearch").keydown(function (e) {
                if (e.which == '13') {
                    e.preventDefault();
                    doSearch();
                }
            });
        })
        function BodyLoad() {
            StartApp();
        }
        var map;
        var dtAtm;
        var arrMarker = [];
        function StartApp() {
            var myWidth = $(window).width();
            var myHeight = $(window).height();
            var container = $('#container');
            container.width(myWidth - $('#LeftContent').width() - 1);
            container.height(myHeight - 139);
            var divContainer = document.getElementById('container');
            map = new VMap(divContainer);
            map.addControl(new VLargeMapControl());// tao dk voi cac nut di chuyen ban do 4 huong
            map.addControl(new VScaleControl());// tao dk hien thi ti le ban do
            map.setCenter(new VLatLng(10.7630381, 106.684597), 10);
            AddListeners();

            _Default.GetData(-1, BindData)
        }

        function BindData(data) {
            map.clearOverlays();//
            if (data.error == null) {
                dtAtm = data.value.Rows;
                for (i = 0; i < dtAtm.length; i++) {
                    var pt = new VLatLng(dtAtm[i].Latitude, dtAtm[i].Longtitude);
                    map.setCenter(pt, 15);
                    mopt = new VMarkerOptions(new VIcon(dtAtm[i].Icon, new VSize(16, 16)));
                    marker = new VMarker(pt, mopt);
                    marker.atmIndex = i;
                    marker.atmtype = dtAtm[i].AtmTypeID;
                    arrMarker[i] = marker;
                    map.addOverlay(marker);
                }
                map.fitOverlays();
            }
        }

        function AddListeners() {
            VEvent.addListener(map, 'click', function (overlay, pt) {
                var strHTML = '<div class="MiniPopup">' +
                                  '<span class="Title">' + dtAtm[overlay.atmIndex].AtmName + '</span>' +
                                  '<br>' +
                                  '<p class="Content">' +
                                  '<span class="address">' + dtAtm[overlay.atmIndex].Address + '</span>' +
                                  '<span class="comment">' + $(dtAtm[overlay.atmIndex].Description).text().substring(0,100) + '</span>' +
                                  '</p>' +
                                  '<ul class="CommonFunction">' +
                                  '<li><a target="_blank" class="flnk" href="<%= UrlRoot %>/Admin/view.aspx?action=atmdetail&atmid=' + dtAtm[overlay.atmIndex].AtmID + '" id="pfromhere">Sửa</a></li>' +
                                '<li><a class="flnk" onclick="ZoomMap(' + dtAtm[overlay.atmIndex].Latitude + ',' + dtAtm[overlay.atmIndex].Longtitude + ')" id="pviewonmap">Phóng to</a></li>' +
                                '<li><a class="flnk" onclick="ShowInfoAtm(' + overlay.atmIndex + ')" id="pdetail">Chi tiết</a></li></ul>' +
                                '</div>';
                overlay.openInfoWindow(strHTML);
            });
        }

        function TreeMenuClick() {
            if ($('.RegionList_wrap').is(":visible"))
                $('.RegionList_wrap').hide();
            else
                $('.RegionList_wrap').show();

        }

        function TreeMenuSelect(name, id) {
            $('#area_0').html(name);
            $('.RegionList_wrap').hide();
            _Default.GetData(id, BindData)
        }

        function doSearch() {
            _Default.SearchData($('#txtSearch').val(), BindData);
            return false;
        }

        function ZoomMap(la, lo) {
            var pt = new VLatLng(la, lo);
            map.setCenter(pt, 15);
        }

        function CheckAtmType(t,atmtype)
        {
            if(t.checked)
            {
                for(var i=0;i<arrMarker.length;i++)
                {
                    if(arrMarker[i].atmtype == atmtype)
                        map.addOverlay(arrMarker[i]);
                }
            }
            else
            {
                for(var i=0;i<arrMarker.length;i++)
                {
                    if(arrMarker[i].atmtype == atmtype)
                        map.removeOverlay(arrMarker[i]);
                }
            }
        }

        function ShowInfoAtm(index)
        {
            $('#lbTitle').text(dtAtm[index].AtmName);
            $('#lbAddress').text(dtAtm[index].Address);
            $('.weblink').text(dtAtm[index].AtmTypeName);
            $('#lbDes').html(dtAtm[index].Description);
            showPopupDiv('DetailAtm', 'Thông tin chi tiết về ATM', null, null, true, null, null, null);
        }
            
    </script>
</body>
</html>
